import React from 'react'
/* 
1. 初始化状态数据
  构造器中: this.state = {数据属性}
2. 读取状态数据
  读取状态数据: this.state.xxx
3. 更新状态数据
  直接更新状态数据, 界面不会自动更新 this.state.xxx = value
  必须通过this.setState({属性新数据})
*/
export default class StateTest extends React.Component {

  /* constructor() {
    // 第一条语句必须是super()
    super()
    // 1. 初始化状态数据
    this.state = {
      count: 1
    }
  } */
  // 1. 初始化状态数据
  state = {
    count: 1,
    xxx: 'abc'
  }



  render () {
    console.log('render()')
    // 读取状态数据
    const {count} = this.state

    // 事件回调函数在内部调用时, 是直接调用的, 不使用箭头函数, this是undefined
    return <button onClick={ () => { // 箭头函数保证了里面的this是组件对象
      console.log(this)
      // alert('---')
      // 直接更新状态数据, 界面不会自动更新
      // this.state.count = count + 1
      // 必须通过this.setState({属性新数据})
      this.setState({count: count + 1})

    }}>点击次数: {count}</button>
  }
}

// export default StateTest